<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>

	<meta charset="UTF-8" />
	<title>VAOI || RSS</title>
	<meta
		content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
		name='viewport' />

</h:head>

<h:body class="skin-green">
	<ui:composition template="/ADMIN/menuAdmin.xhtml">
		<ui:define name="body">
			<f:view>

				<!-- Site wrapper -->
				<div style="min-height:100%">



						<!-- Main content 
						<section class="content">-->

								<div class="modal fade" id="progressBar" tabindex="-1"
									role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header">

												<h4 class="modal-title" align="center">Cargando</h4>
											</div>
											<div class="modal-body">

												<div class="progress progress-striped active">
													<div class="progress-bar progress-bar-success"
														role="progressbar" aria-valuenow="100" aria-valuemin="0"
														aria-valuemax="100" style="width: 100%"></div>
												</div>

											</div>

										</div>
									</div>
								</div>
								<!-- Barra de Progreso -->

								<!-- Inicio Contenido Principal-->

								<h:form id="form">
									<p:messages id="msg" autoUpdate="true" closable="true" />

									<div class="ui-grid ui-grid-responsive">
										<div class="ui-grid-row">
											<div class="ui-grid-col-6">
												<div class="panel panel-default">

													<div class="panel-heading" align="center"
														style="font-family: sans-serif; font-size: 150%;">Colecciones</div>

													<div class="panel-body">

														<div align="left">

															<p:scrollPanel style="height:200px; width:auto;"
																mode="native">
																<p:tree id="txtFavorito" value="#{rssView.raizFavorito}"
																	var="colecciones" selectionMode="single"
																	style="margin: 0 auto;width:auto;height:30px"
																	selection="#{rssView.seleccionFavorito}">
																	
																	<p:ajax event="select" update=":form:txtRSS" listener="#{rssView.onNodeSelectFavorito}"
																	onstart="$('#progressBar').modal('show');" oncomplete="$('#progressBar').modal('hide');" />
																	
																	<p:treeNode icon="#{colecciones.icono}">
																		<h:outputText value="#{colecciones.nombre}" />
																	</p:treeNode>

																</p:tree>
																<p:tree id="txtColecciones"
																	value="#{rssView.raizColecciones}" var="colecciones"
																	selectionMode="single"
																	style="margin: 0 auto;width:auto;height:168px"
																	selection="#{rssView.seleccionColecciones}">
																	
																	<p:ajax event="select" update=":form:txtRSS" listener="#{rssView.onNodeSelectColeccion}"
																	onstart="$('#progressBar').modal('show');" oncomplete="$('#progressBar').modal('hide');" />

																	<p:treeNode icon="#{colecciones.icono}">
																		<h:outputText value="#{colecciones.nombre}" />
																	</p:treeNode>

																</p:tree>
															</p:scrollPanel>
															<button onclick="crearRss();"
													                class="btn btn-primary btn-block" type="button" >Crear Rss</button>
																	
														</div>

													</div>

												</div>
											</div>
											<div class="ui-grid-col-6">
												<div class="panel panel-default">

													<div class="panel-heading" align="center"
														style="font-family: sans-serif; font-size: 150%;">RSS</div>

													<div class="panel-body">

														<div align="left">

															<p:scrollPanel mode="native"
																style="height:200px; width:auto;">
																<p:tree id="txtRSS" value="#{rssView.raizRss}" var="rss"
																	selectionMode="single"
																	style="margin: 0 auto;width:auto;height:198px"
																	selection="#{rssView.seleccionRss}">
																	
																	<p:ajax event="select" listener="#{rssView.cargar_Feed}" update="@form" 
																	onstart="$('#progressBar').modal('show');" oncomplete="verRss()" />

																	<p:treeNode icon="ui-icon-signal-diag">
																		<h:outputText value="#{rss.url}" />
																	</p:treeNode>

																</p:tree>
															</p:scrollPanel>
															
															<p:commandButton id="renderizarBotones" value="Algo" ajax="false" style="display: none;"/>
															
									
															<p:contextMenu for="txtRSS">

																<p:menuitem value="Modificar RSS"
																	action="#{rssView.modificar()}" icon="ui-icon-pencil"
																	onclick="$('#dlgModificar').modal('show');"
																	update=":formDlg2:txtURL, :formDlg2:messages" />

																<p:menuitem value="Eliminar RSS"
																	action="#{rssView.action_delete}" icon="ui-icon-trash"
																	update="form:txtRSS" />

															</p:contextMenu>

														</div>

													</div>

												</div>
											</div>
										</div>

									</div>

									<div class="panel panel-default" style="height: 480px">

										<div class="panel-heading" align="center"
											style="font-family: sans-serif; font-size: 150%;">Entradas</div>

										<div class="panel-body">

											<p:scrollPanel style="height:400px" mode="native">

												<p:dataList value="#{rssView.listaEntradas}" var="entrada"
													type="unordered" itemType="none"
													rendered="#{not empty rssView.listaEntradas}"
													styleClass="paginated" id="idFeed">

													<h:outputText value="#{entrada.titulo}"
														style="font-weight: bold;display:block" />
													<h:outputText value="#{entrada.descripcion}" escape="false" />
													<br />

													<div align="center">

														<div style="display: inline-block;">
															<table>
																<tr>
																	<th>
																		<div align="center"
																			style="display: inline-block; min-width: 85px; width: 85px; min-height: 100px; height: 100px; padding: 30px 0 0 0;">

																			<p:commandLink value="Leer.."
																				style="font-weight: bold; color:green;"
																				target="_blank"
																				class="btn btn-default fa fa-external-link"
																				action="#{rssView.leer(entrada)}"
																				title="#{entrada.enlace}"
																				onclick="window.open(this.title)" />

																		</div>
																	</th>
																	<th>
																		<div align="center" 
																			style="display: inline-block; min-width: 80px; width: 80px; min-height: 100px; height: 100px; padding: 2px;">
																			<!-- Boton me gusta y compartir Facebook-->
																			<div class="fb-like" data-href="#{entrada.enlace}"
																				data-layout="box_count" data-action="like"
																				data-show-faces="true" data-share="true"></div>
																		</div>
																	</th>
																</tr>

															</table>
														</div>

														<div style="display: inline-block;">
															<table>
																<tr>
																	<th>
																		<div align="center"
																			style="display: inline-block; min-width: 90px; width: 90px; min-height: 100px; height: 100px;">
																			<!-- Boton me gusta Google+ -->
																			<div align="center" class="g-plusone"
																				data-href="#{entrada.enlace}" data-size="tall"></div>
																			<!-- Boton compartir google+ -->
																			<div class="g-plus" data-action="share"
																				data-annotation="none" data-height="24"
																				data-href="#{entrada.enlace}" />
																		</div>
																	</th>
																	<th>
																		<div align="center"
																			style="display: inline-block; min-width: 85px; width: 85px; min-height: 100px; height: 100px; padding: 30px 0 0 0;">
																			<div>

																				<p:commandLink value=" Favorito"
																					style="font-weight: bold; color:orange;"
																					class="btn btn-default fa fa-star"
																					action="#{rssView.guardarFavorito(entrada.enlace)}" />

																			</div>
																		</div>
																	</th>

																</tr>

															</table>
														</div>
													</div>

													<p:separator />

												</p:dataList>

												<p:dataList value="#{rssView.favoritos}" var="favorito"
													type="unordered" itemType="none"
													rendered="#{not empty rssView.favoritos}"
													styleClass="paginated" id="favori">
													<f:facet name="header">
                                                       Favoritos
                                                    </f:facet>

													<h:outputText value="#{favorito.titulo}"
														style="font-weight: bold;display:block" />
													<h:outputText value="#{favorito.descripcion}"
														escape="false" />
													<br />

													<div align="center">

														<div style="display: inline-block;">
															<table>
																<tr>
																	<th>
																		<div align="center"
																			style="display: inline-block; min-width: 85px; width: 85px; min-height: 100px; height: 100px; padding: 30px 0 0 0;">

																			<p:commandLink value="Leer.."
																				style="font-weight: bold; color:green;"
																				target="_blank"
																				class="btn btn-default fa fa-external-link"
																				action="#{rssView.leer(favorito)}"
																				title="#{favorito.enlace}"
																				onclick="window.open(this.title)" />

																		</div>
																	</th>
																	<th>
																		<div align="center"
																			style="display: inline-block; min-width: 80px; width: 80px; min-height: 100px; height: 100px; padding: 2px;">
																			<!-- Boton me gusta y compartir Facebook-->
																			<div class="fb-like" data-href="#{favorito.enlace}"
																				data-layout="box_count" data-action="like"
																				data-show-faces="true" data-share="true"></div>
																		</div>
																	</th>
																</tr>

															</table>
														</div>

														<div style="display: inline-block;">
															<table>
																<tr>
																	<th>
																		<div align="center"
																			style="display: inline-block; min-width: 90px; width: 90px; min-height: 100px; height: 100px;">
																			<!-- Boton me gusta Google+ -->
																			<div align="center" class="g-plusone"
																				data-href="#{favorito.enlace}" data-size="tall"></div>
																			<!-- Boton compartir google+ -->
																			<div class="g-plus" data-action="share"
																				data-annotation="none" data-height="24"
																				data-href="#{favorito.enlace}" />
																		</div>
																	</th>
																	<th>
																		<div align="center"
																			style="display: inline-block; min-width: 85px; width: 85px; min-height: 100px; height: 100px; padding: 30px 0 0 0;">
																			<div>

																				<p:commandLink value=" Eliminar"
																					style="font-weight: bold; color:red;" ajax="false"
																					class="btn btn-default fa fa-star"
																					action="#{rssView.eliminarFavorito(favorito.codigoEntrada)}" />

																			</div>
																		</div>
																	</th>

																</tr>

															</table>
														</div>
													</div>
													<p:separator />

												</p:dataList>

											</p:scrollPanel>

										</div>

									</div>

									<div id="fb-root" />

								</h:form>
								<!-- Fin Contenido Principal-->

								<!-- Inicio Dialogo Crear RSS-->
								<h:form id="formDlg">

									<div class="modal fade" id="dlgRSS" tabindex="-1" role="dialog"
										aria-labelledby="myModalLabel" aria-hidden="true">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-header">

													<h4 class="modal-title" align="center">Crear RSS</h4>
												</div>
												<div class="modal-body">

													<p:messages id="messages" autoUpdate="false"
														closable="true" />
																										<p:outputLabel value="Coleccion:" />
													<h:selectOneMenu id="txtColeccion" value="#{rssView.coleccion}" class="form-control">
                                                       <f:selectItems value="#{rssView.listaColecciones}" />
                                                    </h:selectOneMenu>

													<p:outputLabel value="URL Rss:" />
													<p:inputText id="txtURLC" binding="#{rssView.txtUrl}"
														class="form-control" />

													<p:spacer height="10px" />

													<div align="center">

														<p:commandButton value="Crear" class="btn btn-primary"
															action="#{rssView.action_create()}"
															update=":form:txtRSS, :form:txtColecciones" />
														<p:commandButton value="Cerrar" class="btn btn-danger"
															onclick="$('#dlgRSS').modal('hide');" />
													</div>

												</div>

											</div>
										</div>
									</div>
								</h:form>
								<!-- Fin Dialogo Crear RSS-->

								<!-- Inicio Dialogo Modificar RSS-->
								<h:form id="formDlg2">

									<div class="modal fade" id="dlgModificar" tabindex="-1"
										role="dialog" aria-labelledby="myModalLabel"
										aria-hidden="true">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-header">

													<h4 class="modal-title" align="center">Modificar RSS</h4>
												</div>
												<div class="modal-body" id="panelModificar">

													<p:messages id="messages" autoUpdate="false"
														closable="true" />													

													<p:outputLabel value="URL Rss:" />
													<p:inputText id="txtURL"
														binding="#{rssView.txtUrlModificar}" class="form-control" />

													<p:spacer height="10px" />

													<div align="center">

														<p:commandButton value="Modificar" class="btn btn-primary"
															action="#{rssView.action_modify}"
															update=":form:txtRSS, :form:txtColecciones" />

														<p:commandButton value="Cerrar" class="btn btn-danger"
															onclick="$('#dlgModificar').modal('hide');" />

													</div>

												</div>

											</div>
										</div>
									</div>
								</h:form>
								<!-- Fin Dialogo Modificar 

						</section>-->

					</div>
					<!-- /.content-wrapper -->
				<!-- ./wrapper -->

				<script type="text/javascript">

				function crearRss() {
					$(document.getElementById('formDlg:messages')).fadeOut();
					$(document.getElementById('formDlg:txtURLC')).val("");			
					$('#dlgRSS').modal('show');
					
				}

				function verRss() {
					//$('#progressBar').modal('hide');
				    document.getElementById("form:renderizarBotones").click();
				}

				
					window.___gcfg = {
						lang : 'es-	es'
					};

					//$("#feedEntries").on("click", ".js-share-facebook", shareOnFacebook);
					
					/*function shareOnFacebook() {
                    var feedLink = $(this).data("link");
                    var url = "http://www.facebook.com/sharer.php?u=" + encodeURI(feedLink);
                    window.open(url, "Share on Facebook", "height=400,width=600,status=no,location=no");

                    return false;
                    }*/

					(function() {
						var po = document.createElement('script');
						po.type = 'text/javascript';
						po.async = true;
						po.src = '../js/plusone.js';
						var s = document.getElementsByTagName('script')[0];
						s.parentNode.insertBefore(po, s);
						console.log("Entro Google");
					})();
				</script>


				<script type="text/javascript">
					window.fbAsyncInit = function() {
						FB.init({
							appId : '356963437842660',
							status : true,
							cookie : true,
							xfbml : true
						});
					};

					// Load the SDK Asynchronously   
					(function(d) {
						var js, id = 'facebook-jssdk', ref = d
								.getElementsByTagName('script')[0];
						if (d.getElementById(id)) {
							return;
						}
						js = d.createElement('script');
						js.id = id;
						js.async = true;
						js.src = "//connect.facebook.net/es_ES/all.js";
						ref.parentNode.insertBefore(js, ref);
						console.log("Entro Face");
					}(document));
				</script>

			</f:view>
		</ui:define>
	</ui:composition>
</h:body>

</html>
